<template>
  <div class="floatBehind">
    <!-- 若看的是别人的笔记，显示广告部分 -->
    <img
      v-if="!compileShow"
      src="@/assets/advertising.jpg"
      alt="广告"
      title="广告标题"
    />
    <!-- 若看的是自己的笔记，显示笔记编辑部分 -->
    <div v-if="compileShow">
      <h2>该笔记信息</h2>
      <ul>
        <!-- 笔记名称 -->
        <li
          @mouseenter="compileClick.nodename = true"
          @mouseleave="compileClick.nodename = false"
        >
          笔记名称
          <div class="originMsg" v-show="!inputShow.nodename">
            {{ this.$route.query.nodename }}
          </div>
          <input
            type="text"
            v-show="inputShow.nodename"
            v-model="compileData.nodename"
          />
          <div
            class="compileClick"
            v-show="compileClick.nodename && !inputShow.nodename"
            @click="inputShow.nodename = true"
          >
            编辑
          </div>
          <button
            v-show="inputShow.nodename"
            id="submit"
            @click="submitNodename"
          >
            提交
          </button>
          <button
            v-show="inputShow.nodename"
            @click="inputShow.nodename = false"
          >
            取消
          </button>
        </li>
        <!-- 笔记类型 -->
        <li
          @mouseenter="compileClick.className = true"
          @mouseleave="compileClick.className = false"
        >
          笔记类型
          <div class="originMsg" v-show="!inputShow.className">
            {{ this.$route.query.className }}
          </div>
          <select v-model="compileData.className" v-show="inputShow.className">
            <option
              v-for="item in selectItem.className"
              :key="item.id"
              :value="item.value"
            >
              {{ item.text }}
            </option>
          </select>
          <div
            class="compileClick"
            v-show="compileClick.className && !inputShow.className"
            @click="inputShow.className = true"
          >
            编辑
          </div>
          <button
            v-show="inputShow.className"
            id="submit"
            @click="submit('className')"
          >
            提交
          </button>
          <button
            v-show="inputShow.className"
            @click="inputShow.className = false"
          >
            取消
          </button>
        </li>
        <!-- 笔记语言 -->
        <li
          @mouseenter="compileClick.language = true"
          @mouseleave="compileClick.language = false"
        >
          笔记语言
          <div class="originMsg" v-show="!inputShow.language">
            {{ this.$route.query.language }}
          </div>
          <select v-model="compileData.language" v-show="inputShow.language">
            <option
              v-for="item in selectItem.language"
              :key="item.id"
              :value="item.value"
            >
              {{ item.text }}
            </option>
          </select>
          <div
            class="compileClick"
            v-show="compileClick.language && !inputShow.language"
            @click="inputShow.language = true"
          >
            编辑
          </div>
          <button
            v-show="inputShow.language"
            id="submit"
            @click="submit('language')"
          >
            提交
          </button>
          <button
            v-show="inputShow.language"
            @click="inputShow.language = false"
          >
            取消
          </button>
        </li>
        <!-- 笔记描述 -->
        <li
          @mouseenter="inputShow.description = true"
          @mouseleave="inputShow.description = false"
        >
          笔记描述
          <button v-show="inputShow.description" @click="submitDescription">
            提交
          </button>
          <button v-show="inputShow.description">复原</button>
          <textarea
            cols="30"
            rows="10"
            v-model="compileData.description"
            @focus="inputShow.description = true"
          ></textarea>
        </li>
        <!-- 内容更新 -->
        <li>
          内容更新
          <form
            :action="updateAction"
            method="post"
            target="iframe_display"
            enctype="multipart/form-data"
            @submit="check"
          >
            <div id="file">
              点击选择文件
              <input
                type="file"
                name="file"
                ref="uploadInput"
                multiple="multiple"
              />
            </div>
            <input type="submit" value="上传" />
          </form>
          <iframe
            name="iframe_display"
            style="display: none"
            frameborder="0"
          ></iframe>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getCookie } from "@/tool/ToolCookie";
export default {
  data() {
    return {
      // 更新笔记的请求url
      updateAction:
        "http://localhost:8181/node/updateNode/" + this.$route.query.id,
      // 控制编辑按钮的显示or隐藏
      compileClick: {
        nodename: false,
        className: false,
        language: false,
      },
      // 控制input和select框的显示or隐藏
      inputShow: {
        nodename: false,
        className: false,
        language: false,
        description: false,
      },
      // select框的选项
      selectItem: {
        className: [
          { id: 1, value: "Study", text: "学习笔记类" },
          { id: 2, value: "Source", text: "项目源码类" },
          { id: 3, value: "Bug", text: "BUG解决类" },
          { id: 4, value: "Curriculum", text: "课程系列类" },
          { id: 5, value: "Function", text: "功能实现类" },
          { id: 6, value: "other", text: "其他" },
        ],
        language: [
          { id: 1, value: "Java", text: "Java" },
          { id: 2, value: "Python", text: "Python" },
          { id: 3, value: "HTML", text: "HTML" },
          { id: 4, value: "JavaScript", text: "JavaScript" },
          { id: 5, value: "Go", text: "Go" },
          { id: 6, value: "PHP", text: "PHP" },
          { id: 7, value: "JSP", text: "JSP" },
          { id: 8, value: "C", text: "C" },
          { id: 9, value: "CSS", text: "CSS" },
          { id: 10, value: "Maven", text: "Maven" },
          { id: 11, value: "MySQL", text: "MySQL" },
          { id: 12, value: "Redis", text: "Redis" },
          { id: 13, value: "Android", text: "Android" },
          { id: 14, value: "XML", text: "XML" },
          { id: 15, value: "Docker", text: "Docker" },
          { id: 16, value: "Ruby", text: "Ruby" },
          { id: 17, value: "Rust", text: "Rust" },
          { id: 18, value: "other", text: "其他" },
        ],
      },
      // 用户输入的value
      compileData: {
        nodename: this.$route.query.nodename,
        className: this.$route.query.className,
        language: this.$route.query.language,
        description: this.$route.query.description,
      },
      // 上传文件判断，不能上传除了md和txt的文件
      upload() {
        let files = this.$refs.uploadInput.files;
        let AllUpExt = ".md|.txt",
          // 转为小写
          extName = files[0].name
            .substring(files[0].name.lastIndexOf("."))
            .toLowerCase();
        if (AllUpExt.indexOf(extName + "|") == "-1") {
          alert("文件格式不正确,请上传markdown文件(.md文件)!");
          this.$refs.uploadInput.value = "";
          return false;
        }
      },
      // 上传笔记判断
      check() {
        alert("笔记更新成功,请手动刷新页面");
      },
    };
  },
  methods: {
    // 修改笔记类型Or笔记语言
    submit(item) {
      var value = "";
      if (item == "className") value = this.compileData.className;
      if (item == "language") value = this.compileData.language;
      // 发送请求修改数据库数据
      this.$axios({
        method: "post",
        url:
          "http://localhost:8181/node/alter/" +
          item +
          "/" +
          value +
          "/" +
          this.$route.query.id,
      }).then(
        (res) => {
          console.log(res);
          if (res.data) alert("修改成功!");
          // 跳转回自己
          let className = this.$route.query.className;
          let language = this.$route.query.language;
          if (item == "className") className = value;
          if (item == "language") language = value;
          this.$router.push({
            path: "nodeDetail",
            query: {
              className: className,
              id: this.$route.query.id,
              language: language,
              nodename: this.$route.query.nodename,
              popularity: this.$route.query.popularity,
              username: this.$route.query.username,
              userId: this.$route.query.userId,
              description: this.$route.query.description,
            },
          });
          this.$router.go(0);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 修改笔记描述
    submitDescription() {
      this.$axios({
        method: "post",
        url: "http://localhost:8181/node/updateDescription",
        data: {
          id: this.$route.query.id,
          description: this.compileData.description,
        },
      }).then(
        (res) => {
          console.log(res);
          if (res.data) alert("修改成功!");
          // 跳转回自己，传输新数据，简介写法不成功==还没想到好的方法
          this.$router.push({
            path: "nodeDetail",
            query: {
              className: this.$route.query.className,
              id: this.$route.query.id,
              language: this.$route.query.language,
              nodename: this.$route.query.nodename,
              popularity: this.$route.query.popularity,
              username: this.$route.query.username,
              userId: this.$route.query.userId,
              description: this.compileData.description,
            },
          });
          this.$router.go(0);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 修改笔记名
    async submitNodename() {
      let nodeNameCheck = false
      await this.$axios({
        method: "post",
        url:
          "http://localhost:8181/node/findNodeByName/" +
          this.compileData.nodename +
          "/" +
          this.$route.query.userId,
      }).then(
        (res) => {
          console.log(res.data);
          if(res.data) nodeNameCheck = true
        },
        (err) => {
          console.log(err);
        }
      );
      if(nodeNameCheck) {
        alert("您已经有一篇同名笔记，请更改笔记名")
        return
      }
      // 发送请求更改笔记名
      this.$axios({
        method: "post",
        url: "http://localhost:8181/node/updateNodename",
        data: {
          id: this.$route.query.id,
          nodename: this.compileData.nodename,
        },
      }).then(
        (res) => {
          console.log(res);
          if (res.data) alert("修改成功!");
          // 跳转回自己
          this.$router.push({
            path: "nodeDetail",
            query: {
              className: this.$route.query.className,
              id: this.$route.query.id,
              language: this.$route.query.language,
              nodename: this.compileData.nodename,
              popularity: this.$route.query.popularity,
              username: this.$route.query.username,
              userId: this.$route.query.userId,
              description: this.$route.query.description,
            },
          });
          this.$router.go(0);
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
  computed: {
    compileShow() {
      return this.$route.query.userId == getCookie("userId") ? true : false;
    },
  },
};
</script>

<style scoped>
img {
  height: 100%;
  width: 100%;
  background: no-repeat;
}
h2 {
  color: #fff;
  margin: 10px 0;
  padding: 0 0 10px 10px;
  border-bottom: solid #55556d 0.5px;
}
ul {
  list-style: none;
}
li {
  margin: 20px 0 0 10px;
  color: #fff;
}
.originMsg {
  display: inline-block;
  margin-left: 20px;
}
.compileClick {
  display: inline-block;
  margin-left: 10px;
  color: #55556d;
  font-size: medium;
  cursor: pointer;
}
input,
select {
  background: none;
  border: #55556d 0.5px solid;
  border-radius: 10px;
  width: 100px;
  height: 20px;
  margin-left: 10px;
  color: #fff;
  text-align: center;
}
option {
  background-color: #242834;
}
button {
  margin-left: 10px;
  background: none;
  border: #55556d 0.5px solid;
  height: 20px;
  width: 40px;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-size: x-small;
}
#submit {
  background-color: #2ecc71;
  border-color: #2ecc71;
}
textarea {
  display: block;
  text-align: center;
  background: none;
  outline: none;
  border: #55556d solid 0.5px;
  height: 80px;
  max-height: 130px;
  max-width: 280px;
  min-height: 80px;
  min-width: 260px;
  margin-top: 15px;
  color: #fff;
}
#file {
  margin: 10px auto;
  position: relative;
  text-align: center;
  height: 30px;
  width: 150px;
  overflow: hidden;
  font-size: x-large;
  border: #55556d 0.5px solid;
  border-radius: 20px;
  padding: 5px 10px;
}
input[type="file"] {
  position: absolute;
  z-index: 10;
  height: 30px;
  width: 250px;
  top: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}
#file:hover,
input[type="submit"]:hover {
  background-color: #2ecc71;
  border-color: #2ecc71;
}
input[type="submit"] {
  cursor: pointer;
  margin: 10px auto;
  display: block;
  padding: 5px 10px;
  height: 30px;
  width: 150px;
  font-size: large;
  line-height: 15px;
}
</style>